
<template>
  <div id="app">
    <!-- 路由动画 -->

    <!-- <transition name="fade">
    <router-view/>
  </transition> -->

    <router-view />
    <!-- 底部tab -->
    <van-tabbar route v-if="!$route.meta.showTabbar">
      <van-tabbar-item icon="chat-o" to="/">微信</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/address">
        <van-badge class="dot" :content="num" max="99" v-show="mesg">
        </van-badge
        >通讯录</van-tabbar-item
      >
      <van-tabbar-item icon="browsing-history-o" to="/discover"
        >发现</van-tabbar-item
      >
      <van-tabbar-item icon="user-circle-o" to="/my">我</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import WebIM from "./utils/WebIM";
import { mapActions, mapState } from "vuex";
import { Notify } from "vant";
// import { toast } from "vant";
export default {
  data() {
    return {
      token: "",
      hasMesg: false,
      num: 0,
      forbidClick: false,
    };
  },
  computed: {
    // Login.js会创建一个变量 isLogin 存储是否登录的状态,为真:登录, 为假:未登录
    ...mapState({
      count: (state) => state.friends.count,
      mesg: (state) => state.friends.mesg,
      refuseFriend: (state) => state.friends.refuseFriend,
      agreeFriend: (state) => state.friends.agreeFriend,
      isLogin: (state) => state.login.isLogin,
      userId: (state) => state.login.userId,
      count: (state) => state.friends.count,
      mesg: (state) => state.friends.mesg,
      refuseFriend: (state) => state.friends.refuseFriend,
      agreeFriend: (state) => state.friends.agreeFriend,
      userPhone: (state) => state.login.userId,
    }),
  },
  watch: {
    agreeFriend() {
      if (this.agreeFriend) {
        Notify({
          type: "success",
          message: `${this.agreeFriend}用户 同意您的申请`,
        });
      }
    },

    refuseFriend() {
      if (this.refuseFriend) {
        Notify(`${this.refuseFriend}用户 拒绝您的申请`);
      }
    },
    count(newVal) {
      console.log(newVal);
      this.num = newVal;
    },

    userPhone(newV) {
      this.getUserInfo();
      return newV;
    },
    imgurl(newV) {
      return newV;
    },
    userNickName(newV) {
      return newV;
    },
  },
  created() {
    this.getUserInfo();
    WebIM.logger.disableAll();
    if (sessionStorage.getItem("wxUserInfo") !== null) {
      let obj = JSON.parse(sessionStorage.getItem("wxUserInfo"));
      if (
        obj !== undefined &&
        obj !== null &&
        obj.userId !== undefined &&
        obj.userId !== null
      ) {
        this.getUserToken(obj.userId, obj.password);
      }
    }
  },
  methods: {
    ...mapActions(["isByVerification"]),
    getUserInfo() {
      if (this.userPhone !== -1) {
        this.forbidClick = false;
        WebIM.conn.fetchUserInfoById(this.userPhone).then((res) => {
          this.imgurl = res.data[this.userPhone].avatarurl;
          this.userNickName = res.data[this.userPhone].nickname;
          let obj = {
            phone: this.userPhone,
            avatarurl: this.imgurl,
            nickname: this.userNickName,
          };
          this.$store.commit("setUserInfo", obj);
        });
      } else {
        this.forbidClick = true;
      }
      this.$toast.loading({
        message: "加载中...",
        forbidClick: this.forbidClick,
      });
    },

    async getUserToken(id, pwd) {
      let tokenData = {
        grant_type: "password",
        username: id,
        password: pwd,
      };
      await this.$axios
        .post(
          "https://a1.easemob.com/1103220930120764/chat-demo/token",
          JSON.stringify(tokenData)
        )
        .then((response) => {
          this.token = response.data.access_token;
          let option = {
            userId: id,
            password: pwd,
            token: response.data.access_token,
          };
          this.isByVerification(option);
        })
        .catch((res) => {
          this.$cookies.remove("wxUserToken");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#app {
  .van-tabbar {
    background-color: rgb(21, 21, 21);

    .van-tabbar-item {
      position: relative;
      color: #ebedf0;
    }

    .van-tabbar-item--active {
      background-color: rgb(21, 21, 21);
      color: rgb(5, 193, 97);
    }
  }

  /* 路由过渡 */
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.3s linear;
  }

  .fade-enter-from,
  .fade-leave-to {
    transform: translateX(100%);
  }
  .slide-leave-to,
  .slide-leave-from {
    transform: translateX(0);
  }

  .dot {
    position: absolute;
    right: 20px;
    top: 5px;
  }
  .van-badge {
    border: none;
    transform: scale(0.8);
  }
}
</style>
